<template>
  <div class="view-body">
    <el-container class="view-container">
      <el-main>
        <div class="view-card">
          <h1 class="view-title">{{article.title}}</h1>
          <div class="view-author">
            <div class="view-info">
              <div class="view-meta">
                <span>{{article.createTime}}</span>
                <span>阅读&nbsp&nbsp{{article.views}}</span>
                <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                <span>评论&nbsp&nbsp{{article.commentCount}}</span>
                <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                <span>作者&nbsp&nbsp{{article.account}}</span>
                  <el-button
                      v-if="article.account === this.$store.state.account"
                      @click="dialogVisible = true"
                      style="position: absolute;left: 70%;color: white;background-color: #0066ff;border-color: #0066ff;"
                      size="small"
                      slot="reference"
                      icon="el-icon-delete">删除
                  </el-button>

                <el-dialog
                    title="删除文章"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                  <span>是否删除本文章？</span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editArticle(article.id)">确 定</el-button>
                  </span>
                </el-dialog>

              </div>
            </div>
          </div>
          <div class="view-content">
            <markdownEditor :editor=article.editor></markdownEditor>
          </div>

          <div class="like-tag">
            <el-button style="background-color: #e5efff;color: #0066ff;"
                       type="small" icon="el-icon-caret-top" @click="likeArticle()">赞同&nbsp&nbsp{{article.likes}}</el-button>
<!--            <el-button style="background-color: #e5efff;color: #0066ff;"
                       type="small" icon="el-icon-caret-bottom"></el-button>-->
          </div>
<!--          <div class="view-tag">
            标签：
            <el-tag v-for="t in tags"  class="view-tag-item" size="primary">{{t}}</el-tag>
          </div>-->

          <div class="view-tag">
            文章分类：
            <el-tag v-for="c in categorys"  class="view-tag-item" size="primary">{{c}}</el-tag>
          </div>

          <div class="view-comment">
            <div class="view-comment-write">
              <el-row :gutter="20">
                <el-col :span="2">
                  <a class="">
                    <el-image  style="width: 40px; height: 40px" :src="require('@/assets/avatar.jpg')" fit="fill"></el-image>
                  </a>
                </el-col>
                <el-col :span="22">
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 2}"
                      placeholder="你的评论..."
                      class="view-comment-text"
                      v-model="comment.content"
                      resize="none">
                  </el-input>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="2" :offset="22">
                  <el-button  style="background-color: #e5efff;color: #0066ff;margin-top: 5px;"
                              type="mini" @click="publishComment()">评论</el-button>
                </el-col>
              </el-row>
            </div>

            <div class="view-comment-title">
              <span>{{article.commentCount}} 条评论</span>
            </div>

            <commentItem
                v-for="(c,index) in comments"
                :comment="c"
                :articleId="article.id"
                :index="index"
                :rootCommentCounts="comments.length"
                @commentCountsIncrement="commentCountsIncrement"
                :key="c.id">
            </commentItem>
          </div>

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import markdownEditor from "@/components/markdownEditor";
import {getArticleById} from "@/api/article";
import commentItem from "@/components/commentItem";
import {getCommentList, likeArticle, publishComment} from "@/api/comment";
import {deleteOwnArticle} from "@/api/userInfo";

export default {
  name: 'articleView',
  data(){
    return{
      dialogVisible:false,
      tags:[],
      categorys:[],
      article: {
        likes:'',
        editor:{
          value: '',
          toolbarsFlag: false,
          subfield: false,
          defaultOpen: 'preview'
        },
      },
      comments: {},
      comment: {
        article: {},
        content: ''
      }
    }
  },
  methods:{
    editArticle(id){
      // alert("删除")
      this.dialogVisible = false
      deleteOwnArticle(id).then((res) => {
        if(res.data.success){
          this.$message.success("删除成功")
          this.$router.push('/')
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      })
    },
    publishComment(){
      if (!this.comment.content) {
        this.$message({type: 'warning', message: '评论为空哦', showClose: true})
        return;
      }
      this.comment.article.id = this.article.id
      let parms = {articleId:this.article.id,content:this.comment.content}
      if (this.$store.state.token == null) {
        this.$message({type: 'error', message: '登录后才能评论哦', showClose: true})
      }else {
        publishComment(parms,this.$store.state.token).then((res) => {
          if(res.data.success){
            // alert(1)
            this.$message({type: 'success', message: '评论成功', showClose: true})
            this.comment.content = ''
            this.comments.unshift(res.data.data)
            this.commentCountsIncrement()
            this.findCommentList()
          }else{
            this.$message({type: 'error', message: res.data.msg, showClose: true})
          }

        }).catch(error => {
          if (error !== 'error') {
            this.$message({type: 'error', message: '评论失败', showClose: true})
          }
        });
      }
    },
    findArticleById(){
      var id = this.$route.params.id;
      getArticleById(id).then((res) => {
        if(res.data.success){
          this.article.editor.value = res.data.data.content;
          //属性复制相当于beanutils
          Object.assign(this.article, res.data.data)
          // this.article=res.data.data
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      })
    },
    findCommentList() {
      var id = this.$route.params.id;
      getCommentList(id).then((res)=>{
        if(res.data.success){
          this.comments = res.data.data;
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      })
    },
    commentCountsIncrement() {
      this.article.commentCounts += 1
    },
    likeArticle() {
      var id = this.$route.params.id;
      likeArticle(id).then((res)=>{
        if(res.data.success){
          this.$message.success("👍赞同")
          this.article.likes = res.data.data;
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(res => {
        done();
          }).catch(err=> {

      });
    }
  },
  components:{
    markdownEditor,
    commentItem
  },
  created() {
    this.findArticleById()
    this.findCommentList()
  }

}
</script>

<style>
.view-body {
  margin: 100px auto 140px;
}

.view-container {
  width: 800px;
}

.el-main {
  overflow: hidden;
}

.view-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.view-author {
  /*margin: 30px 0;*/
  margin-top: 20px;
  margin-bottom: 20px;
  vertical-align: middle;
}

.view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #8690A6;
}

.view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.view-meta {
  font-size: 16px;
  color: #969696;
}

/*.view-end {
  margin-top: 20px;
}*/
.like-tag {
  margin-top: 20px;
  padding-left: 6px;
  /*border-left: 4px solid #c5cac3;*/
}

.view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}


.view-tag-item {
  margin: 0 4px;
}
.el-tag.el-tag--primary  {
  background-color: #e5efff;
  color: #0066ff;
}

.view-comment {
  margin-top: 60px;
}

.view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.view-comment-write {
  margin-top: 20px;
}

.view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 30px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}


</style>
